<template>
	<view>
		<view class="tab-filter">
			<view class="tab-fixed" :style="{ paddingTop: statusBarHeight + 'px' }">
				<view class="fboxRow Ycenter tab-nav">
					<view class="flex1 fboxRow Ycenter Xcenter font28" :class="index == activeTab ? 'active' : ''"
						v-for="(item, index) in list" :key="index" @tap="navChange(item, index)">
						<text class="nav fboxRow Ycenter Xcenter">{{item.name}}</text>
					</view>
				</view>
				<view class="materialsTag">
					<u-tabs :list="materialsTagIdList" :current="materialsTagIndex" @change="materialsTagChange" :lineWidth="0"
						:activeStyle="{
						color: '#fff',
						'background-color': '#00C15D'
					}" :inactiveStyle="{
						color:'#6A6A6F','background-color': '#F5F5FA'
					}" :itemStyle="{
						padding: '0 8rpx'
					}">
						<view slot="right" style="padding-left: 4px;" @tap="filterShow()">
							<text class="bksCIcon bks-c-ziyuan13shaixuan font26"></text>
						</view>
					</u-tabs>
				</view>
			</view>
		</view>
		<u-overlay :show="popupFilter" zIndex="5" @click="popupHide">
			<view class="tree-popup" :style="{top: popupSpace +'px'}"  @tap.stop>
				<view class="tree-scroll">
					<scroll-view scroll-y="true" style="height: calc(60vh);" @scroll="scroll">
						<view class=" fboxRow Ycenter Xcenter color-969699 font24" style="height:200rpx"
							v-if="!treeData.length">暂无筛选条件</view>
						<tree :list="treeData" :radioId="newId" @change="treeConfirm" />
					</scroll-view>
				</view>
				<view class="bottom-btn fboxRow">
					<view class="colse flex1 fboxRow Ycenter Xcenter color-36363A" @tap="resetTag">重置</view>
					<view class="filter flex1 fboxRow Ycenter Xcenter color-fff" @tap="onSubmit">筛选</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import {
		materialsTag
	} from '@/api/bks.examinee.js';
	import {
		getClassifyTreeAll
	} from '@/api/bks.datum.js';
	import tree from './tree-radio.vue';
	export default {
		components: {
			tree
		},
		// props: {
		// 	activeTab: {
		// 		type: [Number, String],
		// 		default: 0
		// 	},
		// },
		data() {
			return {
				activeTab: 0,
				popupFilter: false,
				list: [{
						name: '专题',
						index: 1,
					},
					{
						name: '题库',
						index: 2
					},
				],
				statusBarHeight: getApp().globalData.statusBarHeight,
				materialsTagIndex: 0,
				materialsTagIdList: [{
					materialsTagId: 'unlimited',
					materialsTagName: '不限'
				}],
				materialsTagId: 'unlimited',
				treeData: [
					// {id: '1', label: '北京', checked: false},
					// {id: '2', label: '上海', checked: false, children: [
					//     {id: '2-1', label: '上海-1', checked: false},
					//     {id: '2-2', label: '上海-2', checked: false},
					//     {id: '2-3', label: '上海-3', checked: false},
					// ] },
				],
				classifyId: '',
				newId: '',
				popupSpace: 0
			};
		},
		created() {
			this.typeList()
		},
		mounted(){
			uni.createSelectorQuery(this).select('.tab-filter').boundingClientRect((rect)=>{
				console.log(rect)
				this.popupSpace = rect.height + rect.top
			}).exec()
		},
		methods: {
			scroll() {

			},
			popupHide(){
				this.popupFilter = false
				this.newId = ''
			},
			resetTag(){
				this.classifyId = ''
				this.newId = ''
				this.materialsTagId = ''
				this.materialsTagIndex = 0
				this.popupFilter = false
				this.callBack()
			},
			onSubmit(){
				this.classifyId = this.newId
				this.popupFilter = false
				this.callBack()
			},
			// 获取科目
			typeList() {
				materialsTag().then(res => {
					const list = [...[{ materialsTagId: 'unlimited',materialsTagName: '不限'}], ...res.data]
					list.filter(item => item.name = item.materialsTagName)
					if(this.activeTab == 1){
					  list.pop()
					}
					this.materialsTagIdList = list
				})
			},
			// 获取分类树形结构
			getTree() {
				const materialsTagId = this.materialsTagIdList[this.materialsTagIndex].materialsTagId
				let id = materialsTagId == 'unlimited' ? '' : materialsTagId
				if (this.activeTab == 1) { // activeTab == 2
					id = "TK0001"
				}
				getClassifyTreeAll({
					materialsTagId: id,
					classifyId: this.classifyId
				}).then(res => {
					// this.treeData = res.data
					this.treeData = this.reset(res.data)
				})
			},
			reset(list) {
				list.filter(item => {
					if (item.children) {
						item.open = true
						this.reset(item.children)
					}
				})
				return list
			},
			// 显示筛选
			filterShow(e) {
				this.popupFilter = !this.popupFilter
				if(this.popupFilter){this.getTree()}				
			},
			// 专题，题库切换
			navChange(item, index) {
				this.activeTab = index
				this.classifyId = ''
				this.newId = ''
				this.materialsTagId = ''
				this.materialsTagIndex = 0
				this.typeList()
				this.callBack()
				if (this.popupFilter) {
					this.getTree()
				}
			},
			// 科目选择
			materialsTagChange(e) {
				this.materialsTagIndex = e.index
				this.materialsTagId = e.materialsTagId
				this.classifyId = ''
				this.newId = ''
				if (this.popupFilter) {
					this.getTree()
				}else{
					this.callBack()
				}
			},
			// 分类选择
			treeConfirm(e) {
				this.newId = e.id
			},
			// 回调
			callBack(){
			  const {activeTab, materialsTagId, classifyId} = this
			  const obj = {
				activeTab,
				classifyId,
				materialsTagId: materialsTagId == 'unlimited' ? '' : materialsTagId
			  }
			  this.$emit('tabChange',obj)
			},
		}
	};
</script>

<style lang="scss" scoped>
	.tab-filter {
		position: relative;
		background-color: #fff;
		height: 182rpx;
	}
	.tab-fixed{position: fixed;top: 88rpx;left: 0;right: 0;width: 100%;height: 182rpx;z-index: 6;}

	.tab-nav {
		position: relative;
		border-bottom: 1rpx solid #eee;
		color: #9899A1;
		z-index: 6;
		background-color: #fff;
	}

	.tab-nav .nav {
		height: 88rpx;
	}

	.tab-nav .active {
		color: #00C15D;
	}

	.tab-nav .active .nav {
		border-bottom: 4rpx solid #00C15D;
	}

	.materialsTag {
		position: relative;
		padding: 20rpx 20rpx 20rpx 10rpx;
		z-index: 6;
		background-color: #fff;
	}

	.materialsTag /deep/ .u-tabs__wrapper__nav__item__text {
		padding: 0 26rpx;
		height: 48rpx;
		line-height: 48rpx;
		font-size: 24rpx;
		border-radius: 24rpx;
		white-space: nowrap;
	}

	.tree-popup {
		position: fixed;
		top: 264rpx;
		left: 0;
		right: 0;
		z-index: 6;
		background-color: #fff;
	}

	.tree-scroll {}

	.bottom-btn {
		width: 100%;
		height: 88rpx;
		border-top: 1px solid #F0F0F5;
		z-index: 7;
	}

	.bottom-btn .colse {
		background-color: #fff;
	}

	.bottom-btn .filter {
		background: linear-gradient(-90deg, #00B356 0%, #79DBA8 100%);
	}
</style>